<template>
  <div>
    <div class="handle-box" style="margin: 20px 0">
      <el-input v-model="customerName" placeholder="客户名称" style="width: 200px;margin: 0 20px"></el-input>
      <el-date-picker type="date" v-model="startTime" value-format="YYYY-MM-DD" placeholder="起始日期"
                      style="width: 200px;margin-right: 20px"></el-date-picker>
      <el-date-picker type="date" v-model="endTime" value-format="YYYY-MM-DD" placeholder="结束日期"
                      style="width: 200px;margin-right: 20px"></el-date-picker>
      <el-button type="primary" v-on:click="info()"><el-icon class="el-icon--left"><Search /></el-icon>查询</el-button>
    </div>

    <el-table :data="tableData" border stripe header-cell-class-name="table-header">
      <el-table-column prop="customerName" label="客户名称"></el-table-column>
      <el-table-column prop="salePerson" label="销售员"></el-table-column>
      <el-table-column prop="saleDate" label="销售时间"></el-table-column>
      <el-table-column prop="saleTotalPrice" label="订单总额"></el-table-column>
      <el-table-column label="查看详情">
        <template #default="scope">
          <el-button type="primary" @click="goSaleDetails(scope.row)"><el-icon class="el-icon--left"><Search /></el-icon>查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--查看采购详情-->
    <el-dialog v-model="dialogVisibleDetails" title="销售信息详情" width="50%">
      <div>
        <p style="margin: 30px 0"><span
            style="margin-right: 30px">客户名称</span>{{ this.saleDetails.customerName }}</p>
        <p style="margin: 30px 0"><span style="margin-right: 30px">销售员</span>{{ this.saleDetails.salePerson }}
        </p>
        <p style="margin: 30px 0"><span
            style="margin-right: 30px">销售日期</span>{{ this.saleDetails.saleDate }}</p>
        <p style="margin: 30px 0"><span
            style="margin-right: 30px">订单金额</span>{{ this.saleDetails.saleTotalPrice }}</p>
        <p style="margin: 30px 0"><span
            style="margin-right: 30px">送货地址</span>{{ this.saleDetails.saleAddress }}</p>

        <span>出库物品明细</span>
        <el-table :data="tableDataDetails" border stripe header-cell-class-name="table-header">
          <el-table-column prop="saleDetailsName" label="商品名称"></el-table-column>
          <el-table-column prop="saleDetailsBrand" label="品牌"></el-table-column>
          <el-table-column prop="saleDetailsPrice" label="成交价"></el-table-column>
          <el-table-column prop="saleDetailsNumber" label="销售数量"></el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisibleDetails=false">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!--分页-->
    <el-pagination style="width:400px;margin: 30px auto" v-model:page-size="pageSize" v-model:current-page="curPage"
                   :total="total" background @current-change="info"></el-pagination>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "saleMes",
  created() {
    this.info()
  },
  data() {
    return {
      tableData: [],
      pageSize: 4,
      curPage: 1,
      total: 0,
      customerName: '',
      startTime: '',
      endTime: '',
      dialogVisibleDetails: false,
      saleDetails: {},
      tableDataDetails: [],
    }
  },
  methods: {
    info() {
      let param = {
        "curPage": this.curPage,
        "pageSize": this.pageSize,
        "startTime": this.startTime,
        "endTime": this.endTime,
        data: {"customerName": this.customerName}
      }
      let config = {
        headers: {
          'Content-Type': 'application/json'
        }
      }
      axios.post('/api/saleMes/info', param, config).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
      })
    },
    goSaleDetails(row) {
      this.dialogVisibleDetails = true
      this.saleDetails = {
        customerName: row.customerName,
        salePerson: row.salePerson,
        saleDate: row.saleDate,
        saleTotalPrice: row.saleTotalPrice,
        saleAddress: row.saleAddress,
      }
      axios.get('/api/saleDetails/info?fkId=' + row.saleMesId, null).then(response => {
        this.tableDataDetails = response.data
      })
    },
  }
}
</script>

<style scoped>

</style>